<template>
  <BlogContainer>
    <div :class="isDesktop ? 'px-ctn' : 'px-4 pb-2'">
      <Breadcrumb :breadcrumbs="breadcrumbs"></Breadcrumb>
    </div>
    <div class="h-100" :class="isDesktop ? 'px-ctn d-flex justify-center align-center' : 'px-4'">
      <div class="d-flex align-center justify-space-between w-100" :class="{ 'flex-column-reverse': !isDesktop }">
        <div :class="isDesktop ? 'v-col-5 mr-8 scroll' : 'w-100 px-0 mt-4'">
          <div class="font-weight-500 line-height-140 mb-2" :class="isDesktop ? 'font-size-20' : 'font-size-16'">
            {{ $t('title.about') }} Fantasi
          </div>
          <i18n-t
            keypath="about.content"
            tag="div"
            class="font-weight-400 line-height-140 pre-line"
            :class="isDesktop ? 'font-size-16' : 'font-size-14'"
          >
            <template #freeSignUp>
              <a href="https://fantasi.one/sign-up" class="text-primary">{{ $t('about.freeSignUp') }}</a>
            </template>
            <template #beCreator>
              <a href="https://fantasi.one/creator-sign-up" class="text-primary">{{ $t('title.beCreator') }}</a>
            </template>
          </i18n-t>
        </div>
        <div>
          <img src="/public/images/1280x720_1.png" alt="About Fantasi" />
        </div>
      </div>
    </div>
  </BlogContainer>
  <Jsonld :schema="schema"></Jsonld>
</template>

<script setup>
import { ref, shallowRef } from 'vue'
import { storeToRefs } from 'pinia'
import { useAppStore } from '@/store/app'
import { $t } from '@/i18n'
import Breadcrumb from '@/components/common/Breadcrumb.vue'
import Jsonld from '@/components/common/Jsonld.vue'
import BlogContainer from '@/components/layout/BlogContainer.vue'

const { isDesktop } = storeToRefs(useAppStore())

const breadcrumbs = ref([
  { label: $t('meta.keywords.title'), to: '/' },
  { label: $t('title.about'), to: '/about' },
])

// Jsonld 佈置
const schema = shallowRef({
  '@context': 'https://schema.org',
  '@type': 'WebSite',
  name: 'Fantasi',
  url: 'https://www.fantasi.one/about',
})
</script>
<style lang="scss" scoped>
.px- {
  &ctn {
    padding: 0 8.3334%;
  }
}
img {
  max-width: 100%;
  width: 50rem;
  height: auto;
  border-radius: 0.625rem;
  -webkit-user-drag: none;
}
.scroll {
  max-height: 25rem;
  overflow-y: scroll;
  overflow-x: hidden;
  display: flex;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  flex-direction: column;
  align-self: stretch;

  &::-webkit-scrollbar {
    display: flex;
    width: 0.25rem;
  }

  /* 軌道背景底色 */
  &::-webkit-scrollbar-track {
    border-radius: 0.09375rem;
    background: var(--color-primary-divider, rgba(215, 215, 215, 0.2));
  }

  /* 滑桿顏色 */
  &::-webkit-scrollbar-thumb {
    border-radius: 0.09375rem;
    border: 0.35rem solid transparent;
    background: var(--color-primary-divider, rgba(215, 215, 215, 1));
  }
}
</style>
